<template>
    <div class="main" v-loading="loading">
        <div class="search">
            <el-input v-model="search" @change.native="onSearch()" placeholder="Enter to search" suffix-icon="el-icon-search" clearable />
        </div>
        <div class="list">
            <el-row :gutter="22">
                <el-col v-for="(item,index) in data" :span="6" v-bind:key="index">
                    <div class="item">
                        <el-card class="box-card" :body-style="cardStyle(index)" @mouseover.native="moveIn(index)" @mouseout.native="moveOut(index)">
                            <transition name="el-zoom-in-center" v-if="item.show">
                                <div class="transition-box text">{{item.title}}</div>
                            </transition>
                            <transition name="el-zoom-in-center" v-else>
                                <div class="transition-box btn-box">
                                    <el-button size="mini" class="fa fa-compass" @click="panel(item)"> 控制台</el-button>
                                    <el-button size="mini" class="fa fa-cog" @click="edit(item)"></el-button>
                                    <el-button size="mini" class="fa fa-trash" @click="onDel(item.ID,index)"></el-button>
                                </div>
                            </transition>
                        </el-card>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="item create">
                        <el-card class="box-card" :body-style="lastCardStyle">
                            <div class="text" @click="add()"><i class="el-icon-circle-plus"></i> 新建</div>
                        </el-card>
                    </div>
                </el-col>
            </el-row>
            <el-dialog title="编辑" :visible.sync="dialogDel" width="350px">
                <el-form ref="form" :model="editData" :rules="rules" label-width="0px">
                    <el-form-item prop="title" label="" :rules="rules.title">
                        <el-input v-model="editData.title"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="editData.intro"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="medium" style="width:100%" @click="onModify()">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <el-dialog title="添加" :visible.sync="dialogAdd" width="350px">
                <el-form ref="form" :model="addData" :rules="rules" label-width="0px">
                    <el-form-item prop="title" label="" :rules="rules.title">
                        <el-input v-model="addData.title"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="addData.intro"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="medium" style="width:100%" @click="onAdd()">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import {axget,axpost} from '@/components/api/index'
export default {
    data(){
        return {
            search:'',
            dialogDel:false,
            dialogAdd:false,
            loading:false,
            editData:[],
            addData:{
                title:'',intro:''
            },
            colorSet:[
                '#409EFF',
                '#e03997',
                'orange',
                '#21ba45',
                '#F56C6C',
                '#6435c9',
            ],
            lastCardStyle:{
                padding: '15px',
                background: '#21ba45',
                color: '#fff',
                cursor: 'pointer',
                height: '20px'
            },
            data:[],
            rules:{
                title : [{required: true, message: '标题不能为空', trigger: 'blur'}]
            }
        }
    },
    methods:{
        onLoad(){
            this.loading = true
            let where = {
                p:1,
                limit:100,
                search:this.search
            }
            axpost('/note_mold/get_list',where).then(res=>{
                let data = res.data
                if(res.status === 200){
                    if(data.status === 200 || data.status === 201){
                        this.data = data.result
                    }
                }else{
                    this.$notify({title:'提示',message:'数据获取超时',type:"warning"})
                }
                this.loading = false
            }).catch(()=>{
                this.loading = false
                this.$notify({
                    title: '提示',
                    message: '数据获取超时',
                    type:'warning'
                })
            })
        },
        onSearch(){
            this.onLoad()
        },
        onAdd(){
            if(!this.addData.title){
                this.$notify({title:'提示',message:'标题不能为空',type:'warning'})
            }else{
                axpost('/note_mold/add',this.addData).then(res=>{
                    let data = res.data
                    if(res.status === 200 && data.status === 200){
                        this.dialogAdd = false
                        this.addData = { title:'' ,intro:'' }
                        this.data.unshift(data.result)
                        this.$notify({title:'提示',message:'添加成功',type:"success"})
                    }else{
                        this.$notify({title:'提示',message:'添加失败,请稍后再试',type:"warning"})
                    }
                }).catch(()=>{
                    this.$notify({title:'提示',message:'网络请求超时',type:'warning'})
                })
            }
        },
        onModify(){
            if(!this.editData.title){
                this.$notify({title:'提示',message:'标题不能为空',type:'warning'})
            }else{
                axpost('/note_mold/modify',this.editData).then(res=>{
                    let data = res.data
                    if(res.status === 200 && data.status === 200){
                        this.dialogDel = false
                        this.$notify({title:'提示',message:'修改成功',type:"success"})
                    }else{
                        this.$notify({title:'提示',message:'修改失败,请稍后再试',type:"warning"})
                    }
                }).catch(()=>{
                    this.$notify({title:'提示',message:'网络请求超时',type:'warning'})
                })
            }
        },
        onDel(id = 0,index = 0){
            this.$confirm('删除此分类下的所以内容, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let param = {
                    id:id
                }
                axpost('/note_mold/del',param).then(res=>{
                    let data = res.data
                    if(res.status === 200 && data.status === 200){
                        this.data.splice(index,1)
                        this.$notify({title:'提示',message:'删除成功',type:"success"})
                    }else{
                        this.$notify({title:'提示',message:'删除失败,请稍后再试',type:"warning"})
                    }
                }).catch(()=>{
                    this.$notify({title:'提示',message:'网络请求超时',type:'warning'})
                })
            }).catch(()=>{
                //取消
            })
        },
        cardStyle(int = 0){
            return {
                padding: '15px',
                borderTop: '2px solid ' + this.colorSet[int % 6],
                cursor: 'pointer'
            }
        },
        moveIn(int = 0){
            this.data[int].show = false
        },
        moveOut(int = 0){
            this.data[int].show = true
        },
        edit(item = []){
            this.dialogDel = true
            this.editData = item
        },
        add(){
            this.dialogAdd = true
        },
        panel(item = []){
            this.$router.push(
                {
                    path:'/sheets',
                    query:{
                        id:item.ID
                    }
                }
            )
        }
    },
    created(){
        this.onLoad()
    }
}
</script>
<style lang="scss" scoped>
.main .search{
    width: 350px;
    margin: auto;
}
.main .list{
    padding: 30px 20px;
    width: 80%;
    margin: auto;
    min-width: 1150px;
}
.list .item{
    text-align: center;
    font-size: 13px;
    width: 85%;
    margin: 5px auto 15px;
}
.transition-box span:not(:first-child){
    margin-left: 10px;
}
.box-card{
    height: 50px;
}
.btn-box{
    margin-top: -4px;
}
</style>
